<template>
  <nav v-if="isLoggedIn" class="nav-container">
    <span class="username">{{ user.username }}</span>
    <router-link to="/tasks">任务列表</router-link>
    <router-link to="/upload">上传文件</router-link>
    <router-link to="/statistics">数据统计</router-link>
    <button class="logout-btn" @click="handleLogout">退出登录</button>
  </nav>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const user = ref(null)

const isLoggedIn = computed(() => !!user.value)

onMounted(() => {
  const userStr = localStorage.getItem('user')
  if (userStr) {
    user.value = JSON.parse(userStr)
  }
})

const handleLogout = () => {
  localStorage.removeItem('user')
  user.value = null
  router.push('/login')
}
</script>

<style scoped>
.nav-container {
  background-color: #f8f9fa;
  padding: 1rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.nav-container a {
  text-decoration: none;
  color: #666;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.nav-container a:hover {
  color: #4CAF50;
}

.nav-container a.router-link-active {
  background-color: #4CAF50;
  color: white;
}

.username {
  color: #4CAF50;
  font-weight: bold;
}

.logout-btn {
  padding: 0.5rem 1rem;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.logout-btn:hover {
  background-color: #c82333;
}
</style> 